{% extends "siteSetting/set_base.html" %}
{% block title %}友情链接{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/uikit.min.css') }}">

<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/uikit.min.js') }}"></script>
{% endblock %}


{% macro render_modal(link) %}

<div id="modal-edit-{{ link.id }}" class="uk-modal myModal-edit" aria-hidden="true" style="display: none; overflow-y: scroll;">
    <div class="uk-modal-dialog">
        <button type="button" class="uk-modal-close uk-close"></button>
        <div class="uk-modal-header">
            <h3>编辑</h3>
        </div>
  		<div class="uk-modal-body">
			<form action="/setting/links/update/{{ link.id }}" method="post">
                <div class="form-group">
                    <label>站点名称</label>
                    <input class="form-control" name="name" placeholder="站点名称" value="{{ link.name }}">
                </div>
                <div class="form-group">
                    <label>URL</label>
                    <input class="form-control" name="url" placeholder="URL" value="{{ link.url }}">
                </div>
                <div class="checkbox">
                    <label>
                        <input name="state" type="checkbox" {% if link.state%}checked=""{% endif %}>显示状态

                    </label>
                </div>
                <button class="btn btn-primary">提交</button>
            </form>

  		</div>
    </div>
</div>
{% endmacro %}









{% block page_content %}
<h1 class="page-header">友情链接</h1>

<div id="modal-new-link" class="uk-modal myModal" aria-hidden="true" style="display: none; overflow-y: scroll;">
    <div class="uk-modal-dialog">
        <button type="button" class="uk-modal-close uk-close"></button>
        <div class="uk-modal-header">
            <h3>添加</h3>
        </div>
        <div class="uk-modal-body">
            <form action="/setting/links/new" method="post" class="">
                <div class="form-group">
                    <label>站点名称</label>
                    <input name="name" class="form-control" placeholder="站点名称" required>
                </div>
                <div class="form-group">
                    <label>URL</label>
                    <input name="url" class="form-control" placeholder="URL" required>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="state" checked="">显示状态
                    </label>
                </div>
                <button class="btn btn-primary">提交</button>
            </form>
        </div>
        <div class="uk-modal-footer uk-text-left">
            <!-- <button type="button" class="btn btn-default" onclick="saveSubmit('{{ name }}')">Save</button> -->
        </div>
    </div>
</div>


<button class="new btn btn-primary" data-uk-modal="{target:'#modal-new-link'}" type="button">新增</button>
<button id="id-button-delete" class="btn btn-danger">批量删除</button>
<!--<button>保存</button>-->
<div>
    <table class="table">
        <thead>
        <tr>
            <th></th>
            <th>ID</th>
            <th>站点名称</th>
            <th>URL</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for link in links%}
        <tr>
            <th><label><input type="checkbox" value="{{ link.id }}"></label></th>
            <th scope="row">{{ link.id }}</th>
            <td>{{ link.name }}</td>
            <td>{{ link.url }}</td>
            <td>
                {% if link.state %}显示{% else %}不显示{% endif %}
            </td>
            <td>
                {% if link.state %}
                <a href="/setting/links/hide/{{ link.id }}">隐藏</a>
                {% else %}
                <a href="/setting/links/show/{{ link.id }}">恢复</a>
                {% endif %}
                {#| <a href="/setting/links/update/{{ link.id }}">编辑</a>#}
                | <a href="#modal-edit-{{ link.id }}" data-uk-modal>编辑</a>
                | <a href="/setting/links/delete/{{ link.id }}">删除</a>
                {{ render_modal(link) }}
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>


{% endblock %}
{% block scripts  %}
{{ super() }}
<script>
    var ajaxPost = function (url, method, form, success, error) {
        var request = {
            url: url,
            type: method,
            contentType: 'application/json',
            success: function (r) {
                success(r);
            },
            error: function (err) {
                r = {
                    success: false,
                    data: err
                };
                error(r);
            }
        };
        if (method === 'post') {
            var data = JSON.stringify(form);
            request.data = data;
        }
        $.ajax(request);
    };
    var success = function (r) {
        console.log(r.message);
    };
    var error = function (err) {
            
    };  
    var handle = function () {
        var checkboxs = $("input[type='checkbox']");
        var l = [];
        for (var i = 0; i< checkboxs.length; i++) {
            var c = checkboxs[i];
            var s = $(c).is(':checked')

            if (s === true) {
                l.push($(c).val());
            };
        };
        return l;
    }
    var send = function (form) {
        var method = 'post';
        var url = '/setting/links/delete'
        ajaxPost(url, method, form, success, error);
    }
    var bindActions = function () {
        $('#id-button-delete').on('click', function () {
            var data = handle();
            if (data.length === 0) {
                alert('你还没有选中条目');
            } else {
                send(data);
                location.reload();
            }
        });
        
    }


    var setup = function () {

    };

    $(document).ready(function () {
        setup();
        bindActions();
    });



</script>
<script>
    nav = document.getElementById("nav_link");
    nav.setAttribute("class", "active");
</script>
{% endblock %}
